<!-- 沪深指数（主要+沪市+深市） -->
<template>
  <div>
    <!-- <span>{{' 路由传参:'+$store.state.indexType}}</span> -->
    <!-- 面包屑导航区域 也应该根据url动态渲染数据-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/market' }">沪深行情</el-breadcrumb-item>
      <el-breadcrumb-item>沪深指数</el-breadcrumb-item>
      <el-breadcrumb-item v-if="$store.state.indexType==='main'">主要指数</el-breadcrumb-item>
      <el-breadcrumb-item v-else-if="$store.state.indexType==='hushi'">沪市指数</el-breadcrumb-item>
      <el-breadcrumb-item v-else-if="$store.state.indexType==='shenshi'">深市指数</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-breadcrumb separator-class=" ">
        <el-breadcrumb-item>  沪深指数：</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hsmarket/main' }"><span :style="{'color':($store.state.indexType==='main' ? 'orange':'')}">主要指数</span></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hsmarket/hushi' }"><span :style="{'color':($store.state.indexType==='hushi' ? 'orange':'')}">沪市指数</span></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hsmarket/shenshi' }"><span :style="{'color':($store.state.indexType==='shenshi' ? 'orange':'')}">深市指数</span></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="40">
        <el-col :span="10" style="marginLeft:10px">
          <!-- <el-input placeholder="请输入内容" v-model="$store.state.indexType" clearable @clear="getHSIndexType">
            <el-button slot="append" icon="el-icon-search" @click="getHSIndexType"></el-button>
          </el-input> -->
          <el-input placeholder="请输入指数代码" v-model="queryInfo.selectIndexSymbol" clearable @clear="getHSIndexType" v-show="showSelectInput">
            <el-button slot="append" icon="el-icon-search" @click="getHSIndexType"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 指数列表区域 -->
      <el-table :data="hsIndexData.list" stripe :default-sort="{prop: 'SYMBOL', order: 'ascending'}" :header-cell-style="{font:'12px Tahoma,san-serif',color:'#606266'}">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <!-- 注意区分CODE和SYMBOL -->
        <el-table-column label="代码" prop="SYMBOL" sortable>
          <template slot-scope="scope">
            <!-- "https://money.163.com/+'{{code}}'+.html" -->
            <a  :href="'http://localhost:8080/#/market/'+scope.row.CODE" target="__blank" class="hstock h_hstockName">
            {{scope.row.SYMBOL}}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="NAME" sortable>
          <template slot-scope="scope">
            <!-- "https://money.163.com/+'{{code}}'+.html" -->
            <a :href="'http://localhost:8080/#/market/'+scope.row.CODE" target="__blank" class="hstock h_hstockName">
            {{scope.row.NAME}}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="最新价" prop="PRICE" :formatter="handleFix" sortable width="90%"></el-table-column>
        <el-table-column label="涨跌额" prop="UPDOWN" :formatter="handleFix" sortable></el-table-column>
        <el-table-column label="涨跌幅" prop="PERCENT" :formatter="handlePercent" sortable></el-table-column>
        <el-table-column label="振幅" prop="zhenfu" :formatter="handleFix" sortable></el-table-column>
        <el-table-column label="成交量" prop="VOLUME" :formatter="handleYi" sortable></el-table-column>
        <el-table-column label="成交额" prop="TURNOVER" :formatter="handleYi" sortable></el-table-column>
        <el-table-column label="昨收" prop="YESTCLOSE" :formatter="handleFix" sortable></el-table-column>
        <el-table-column label="今开" prop="OPEN" :formatter="handleFix" sortable></el-table-column>
        <el-table-column label="最高价" prop="HIGH" :formatter="handleFix" sortable></el-table-column>
        <el-table-column label="最低价" prop="LOW" :formatter="handleFix" sortable></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleCountChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="queryInfo.sizesOption()" :page-size="queryInfo.count" layout="total, sizes, prev, pager, next, jumper" :total="hsIndexData.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSelectInput:true,
      hsIndexData:[],
      url:'',
      queryInfo:{
        mainQuery:'CODE:_in_0000001,1399001,0000300,1399006,0000003,0000002,1399106,1399002,1399003,0000016,1399102',
        hushiQuery:'IS_INDEX:true;EXCHANGE:CNSESH',
        shenshiQuery:'IS_INDEX:true;EXCHANGE:CNSESZ',
        selectIndexSymbol:'',
        selectIndexQuery:'',
        sizesOption:function () {
          var arr = new Array()
          for(var i=1;i<=10;i++){
            arr.push(i*25)
          }
          return arr
        },
        page:1,
        count:25
      },
      total:0,
      hsIndexURL:'',
      mainIndexURL:'',
      // mainIndexURL:'http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page=0&query=CODE:_in_0000001,1399001,0000300,1399006,0000003,0000002,1399106,1399002,1399003,0000016,1399102&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW',
      /* url:'http://quotes.money.163.com/hs/service/hsindexrank.php',
      mainIndexParams:{
        host:'/hs/service/hsindexrank.php',
        page:0,
        query:'CODE:_in_0000001,1399001,0000300,1399006,0000003,0000002,1399106,1399002,1399003,0000016,1399102',
        fields:'no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW'
      } */
      hushiIndexURL:'',
      /* url:'http://quotes.money.163.com/hs/service/hsindexrank.php',
      hsIndexParams:{
        host:'/hs/service/hsindexrank.php',
        page:1,
        query:'IS_INDEX:true;EXCHANGE:CNSESH',
        fields:'no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW',
        sort:'SYMBOL',
        order:'asc',
        count:25,
        type:'query',
        callback:'callback_925897272',
        req:319
      } */
      shenshiIndexURL:''
    }
  },
  methods: {
    getHSIndexTypeURL(){
      // 请求地址中的当前页是从0开始的，因为handleCurrentChange方法中的页码也是从1开始计算的，为了保持一致就将data中的page定义为1，所以参数中需要this.queryInfo.page-1
      if (this.$store.state.indexType==='main') {
        this.showSelectInput=false
        this.mainIndexURL='http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page='+(this.queryInfo.page-1)+'&query='+this.queryInfo.mainQuery+'&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW&sort=SYMBOL&order=asc&count='+this.queryInfo.count+'&type=query';
        this.hsIndexURL = this.mainIndexURL
        console.log(this.hsIndexURL);
      }else if(this.$store.state.indexType==='hushi'){
        // 搜索区域
        if(((this.queryInfo.selectIndexSymbol).trim()).length !== 0){
          // 不能直接改变hushiQuery，这样会造成搜索一次之后hushiQuery已经发生改变，再清空input想查询所有的依旧查询不到
          this.queryInfo.selectIndexQuery='SYMBOL:'+this.queryInfo.selectIndexSymbol+';IS_INDEX:true;EXCHANGE:CNSESH'
          console.log(this.queryInfo.selectIndexQuery);
          // page和count也要改变，否则当不在第一页时，page和count会有所改变，从而与网易财经的请求地址不符，请求不到数据
          this.hushiIndexURL='http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page=0&query='+this.queryInfo.selectIndexQuery+'&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW&sort=SYMBOL&order=asc&count=25&type=query';
          console.log(this.hushiIndexURL);
        }else{
          // 未搜索
          this.hushiIndexURL='http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page='+(this.queryInfo.page-1)+'&query='+this.queryInfo.hushiQuery+'&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW&sort=SYMBOL&order=asc&count='+this.queryInfo.count+'&type=query';
        }
        this.hsIndexURL = this.hushiIndexURL
        console.log(this.hsIndexURL);
      }else if(this.$store.state.indexType==='shenshi'){
        // 搜索区域
        if(((this.queryInfo.selectIndexSymbol).trim()).length !== 0){
          // 不能直接改变hushiQuery，这样会造成搜索一次之后hushiQuery已经发生改变，再清空input想查询所有的依旧查询不到
          this.queryInfo.selectIndexQuery='SYMBOL:'+this.queryInfo.selectIndexSymbol+';IS_INDEX:true;EXCHANGE:CNSESZ'
          console.log(this.queryInfo.selectIndexQuery);
          // page和count也要改变，否则当不在第一页时，page和count会有所改变，从而与网易财经的请求地址不符，请求不到数据
          this.shenshiIndexURL='http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page=0&query='+this.queryInfo.selectIndexQuery+'&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW&sort=SYMBOL&order=asc&count=25&type=query';
          console.log(this.hushiIndexURL);
        }else{
          // 未搜索
          this.shenshiIndexURL='http://quotes.money.163.com/hs/service/hsindexrank.php?host=/hs/service/hsindexrank.php&page='+(this.queryInfo.page-1)+'&query='+this.queryInfo.shenshiQuery+'&fields=no,SYMBOL,NAME,PRICE,UPDOWN,PERCENT,zhenfu,VOLUME,TURNOVER,YESTCLOSE,OPEN,HIGH,LOW&sort=SYMBOL&order=asc&count='+this.queryInfo.count+'&type=query';
        }
        this.hsIndexURL = this.shenshiIndexURL
        console.log(this.hsIndexURL);
      }
    },
    getHSIndexType(){
      // 此处将由于是请求的网易财经数据，将参数写进地址了，如果不这样，浏览器存在跨域问题Cross-Origin，需要设置CORB，在实际项目中调用后台接口应该传入参数，
      /* if (this.$store.state.indexType==='main') {
        url = this.mainIndexURL
      } */
      // this.$jsonp(this.url,{param:this.mainIndexParams},(err,res)=>{
      this.getHSIndexTypeURL();
      this.$jsonp(this.hsIndexURL,(err,res)=>{
        if(!err){
          console.log(res);
          this.hsIndexData=res;
        }
      });
    },
    // 监听count改变的事件
    handleCountChange(newCount) {
      console.log(newCount)
      this.queryInfo.count = newCount
      this.getHSIndexType()
      // 点击分页，让页面回到顶部
      if(document.body.scrollTop){
        document.body.scroll(Top)
      }else{
        document.documentElement.scrollTop=0
      }
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.page = newPage
      this.getHSIndexType()
      if(document.body.scrollTop){
        document.body.scroll(Top)
      }else{
        document.documentElement.scrollTop=0
      }
    },
    handleFix:function(row,column){
      return row[column.property].toFixed(2)
    },
    handlePercent:function(row,column){
      return ((row[column.property])*100).toFixed(2)+'%'
    },
    handleYi:function(row,column){
      return ((row[column.property]) / 100000000).toFixed(2)+'亿'
    }
  },
  // 利用计算属性监听vuex中的数据变化，当url参数变化时，在page组件中一旦url变化，立即改变vuex中的indexType
  // 在该组件中一旦vuex变化，立即调用方法，让数据也随之发生变化，因为获取数据是在created中，一旦页面加载完成不会再调用方法
  // 而该页面使用的是路由跳转，如果不监听url变化重新渲染数据，会停留在前一路由中
  computed:{
    watchURLChange(){
      return this.$store.state.indexType
    }
  },
  watch:{
    // (监听hsIndexData也可以成功跳转，但是BUG：会一致监听不会断开！！！因为一旦数据变化会调用方法，又会再次获取新数据，数据变化又会重新调用，监听断不开造成死循环）
    /* hsIndexData:function(newVal,oldVal){
      // this.sCode=newVal
      // this.stockID
      // this.indexCode=newVal;
      // console.log(this.indexCode);
      
    // this.$store.commit('setIndexType',newVal)
    this.getHSIndexType()
    } */
    watchURLChange(){
      console.log('页面跳转');
      // 路由跳转这些参数全部需要重新设置一下，因为是共用data中的数据，一个页面在调用后如果不重新设置，改变后的数据会影响下一个页面
      this.showSelectInput=true
      this.queryInfo.selectIndexSymbol = ''
      this.queryInfo.page=1
      this.queryInfo.count=25
      this.total=0
      this.getHSIndexType()
    }
  },
  created() {
    this.getHSIndexType()
    console.log('HSFHZ');
    console.log(this.queryInfo.sizesOption);
    console.log(this.queryInfo.sizesOption());
    
  }
}
</script>

<style>
</style>
